<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <h1>LocalStorage</h1><!-- 会将数据保存到本地硬盘，关闭浏览器也不会清除数据 
    可以将数据存储在用户的浏览器中,以便在同一域名下的网站之间共享数据-->
    <button onclick="saveData()">保存数据</button>
    <button onclick="readData()">读取数据</button>
    <button onclick="deleteData()">删除数据</button>
    <button onclick="deleteAllData()">清空数据</button>
</body>
<script>
    let p = { name: 'mimi' }
    function saveData() {
        window.localStorage.setItem('msg', 'hello!!!!');
        window.localStorage.setItem('person', JSON.stringify(p));//键和值保存时都会调用toString方法保存为字符串形式,相同的key它的value值会被后者替换,JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。JSON.parse()需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹;

    };
    function readData() {//读一个没有的数据返回值为null
        console.log(window.localStorage.getItem('msg'));//返回类型为string
        const jsonString = window.localStorage.getItem('person');
        console.log(JSON.parse(jsonString));//json.parse(null)结果为null
    };
    function deleteData() {
        window.localStorage.removeItem('msg');
    };
    function deleteAllData() {
        window.localStorage.clear();
    }
</script>

</html>


<!-- 
    ## webStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 相关API：

    1. ```xxxxxStorage.setItem('key', 'value');```
        				该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. ```xxxxxStorage.getItem('person');```

        ​		该方法接受一个键名作为参数，返回键名对应的值。

    3. ```xxxxxStorage.removeItem('key');```

        ​		该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. ``` xxxxxStorage.clear()```

        ​		该方法会清空存储中的所有数据。

4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容，需要手动清除才会消失。
    3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. ```JSON.parse(null)```的结果依然是null。
 -->